<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="../static/lib/bootstrap/css/bootstrap.css"
          th:href="@{/lib/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{css/index.css}">
    <title>首页</title>
</head>
<body>

<nav id="header" class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html" th:href="@{/}">首页</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="register.html" th:href="@{/register}">申请入驻</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="admin-login.html" th:href="@{/admin-backend/login}">管理员登陆</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="logo-bar">
    <img src="../static/img/logo.png" th:src="@{/img/logo.png}" class="img-responsive">
</div>

<a th:href="@{/register}" href="register.html" style="text-decoration: none">
    <div id="apply-bar" class="jumbotron">
        <div class="container">
            <h1 class="h1 text-center">点此申请入驻</h1>
        </div>
    </div>
</a>

<!--主区域-->
<div id="main-content" class="container-fluid">
    <div class="container">
        <div class="row clearfix">
            <div class="col-xs-9">
                <!--此处使用了bootstrap的图片轮滚插件-->
                <div id="slide-show" class="carousel slide" data-ride="carousel">
                    <!--列表指示器-->
                    <ol class="carousel-indicators">
                        <li data-target="#slide-show" data-slide-to="0" class="active"></li>
                        <li data-target="#slide-show" data-slide-to="1"></li>
                        <li data-target="#slide-show" data-slide-to="2"></li>
                    </ol>

                    <!--幻灯片内容-->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="../static/img/carousel/01.jpg" th:src="@{img/carousel/01.jpg}" alt="...">
                            <div class="carousel-caption">
                                欢迎来厦门大学演武创客空间开始创梦第一步！
                            </div>
                        </div>
                        <div class="item">
                            <img src="../static/img/carousel/02.jpg" th:src="@{img/carousel/02.jpg}" alt="...">
                            <div class="carousel-caption">
                                为各种创新项目提供孵化的平台，让有竞争力的创新项目加速创意的成果转化
                            </div>
                        </div>
                        <div class="item">
                            <img src="../static/img/carousel/03.jpg" th:src="@{img/carousel/03.jpg}" alt="...">
                            <div class="carousel-caption">
                                欢迎有创新创业想法或项目的同学组队申请入驻！
                            </div>
                        </div>
                    </div>

                    <!--左右按钮-->
                    <a class="left carousel-control" href="#slide-show" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#slide-show" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <!--用户入口区块-->
            <div id="choices-panel" class="col-xs-3 text-center">
                <div class="row">
                    <p class="text-center"><img src="../static/img/profile.jpg" th:src="@{img/profile.jpg}"></p>
                    <p style="color:white">您还没有登录</p>
                    <p><a th:href="@{/team-management/login}" href="team-login.html">团队登录</a></p>
                    <p><a href="javascript:toggle_team_number();">查询申请</a></p>
                </div>
            </div>
        </div>

        <!--新闻内容区块1-->
        <div class="row news-group1 hidden">
            <div class="col-xs-4">
                <h1 class="h1">example</h1>
                <table class="table table-hover news-list ">
                    <tr>
                        <td>2017/03/28</td>
                        <td style="text-overflow: ellipsis"><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                </table>
                <p class="text-right"><a href="#">more&gt;</a></p>
            </div>
            <div class="col-xs-4">
                <h1 class="h1">example</h1>
                <table class="table table-hover news-list ">
                    <tr>
                        <td>2017/03/28</td>
                        <td style="text-overflow: ellipsis"><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                </table>
                <p class="text-right"><a href="#">more&gt;</a></p>
            </div>
            <div class="col-xs-4">
                <h1 class="h1">example</h1>
                <table class="table table-hover news-list ">
                    <tr>
                        <td>2017/03/28</td>
                        <td style="text-overflow: ellipsis"><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                </table>
                <p class="text-right"><a href="#">more&gt;</a></p>
            </div>
        </div>
        <!--新闻内容区块2-->
        <div class="row news-group2 hidden">
            <div class="col-xs-4">
                <h1 class="h1">example</h1>
                <table class="table table-hover news-list ">
                    <tr>
                        <td>2017/03/28</td>
                        <td style="text-overflow: ellipsis"><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                </table>
                <p class="text-right"><a href="#">more&gt;</a></p>
            </div>
            <div class="col-xs-4">
                <h1 class="h1">example</h1>
                <table class="table table-hover news-list ">
                    <tr>
                        <td>2017/03/28</td>
                        <td style="text-overflow: ellipsis"><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                </table>
                <p class="text-right"><a href="#">more&gt;</a></p>
            </div>
            <div class="col-xs-4">
                <h1 class="h1">example</h1>
                <table class="table table-hover news-list ">
                    <tr>
                        <td>2017/03/28</td>
                        <td style="text-overflow: ellipsis"><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                    <tr>
                        <td>2017/03/28</td>
                        <td><a href="#">Here is news</a></td>
                    </tr>
                </table>
                <p class="text-right"><a href="#">more&gt;</a></p>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">输入验证码</h4>
            </div>
            <div class="modal-body">
                <input class="form-control" id="team-number"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="send_team_number()">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="attentionmodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>团队验证码输入错误！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="send_team_number()">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--开头弹出的提示框-->
<div class="modal fade" id="attentionwebmodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>建议您使用Chrome、Firefox、UC等浏览器，不推荐使用360,IE浏览器。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态弹出框-->
<div id="footer" class="container-fluid">
</div>

<script type="text/javascript" src="../static/js/config.js" th:src="@{/js/config.js}"></script>
<script type="text/javascript" src="../static/lib/jquery/jquery.js" th:src="@{/lib/jquery/jquery.min.js}"></script>
<!-- rap插件 -->
<script type="text/javascript" src="http://rapapi.org/rap.plugin.js?projectId=22290&mode=3" th:remove="all"></script>
<script type="text/javascript" src="../static/lib/bootstrap/js/bootstrap.js" th:src="@{/lib/bootstrap/js/bootstrap.js}"></script>
<script type="text/javascript" th:inline="javascript">
    $(document).ready(function () {
        //监听幻灯片的高度改变
        var slideShow = $("#slide-show");
        var choicesPanel = $("#choices-panel");
        var container = $(".container");
        var logoBar = $("#logo-bar");

        // 这里为了保持两个地方的高度一致
        setInterval(function () {
            if (slideShow.height() !== choicesPanel.height()) {
                choicesPanel.css("height", slideShow.css("height"));
            }
        }, 50);
        //设置主区块宽度为屏幕85%
        var logoBarWidth = parseInt(logoBar.css("width"));
        container.css("width", logoBarWidth * 0.85 + "px");
        //logo对齐主区块
        logoBar.css("padding-left", container.css("margin-left"));

        //美工爸爸强烈要求logo占宽度的85%,所以...
        //监听屏幕改变
        $(window).resize(function (e) {
            var logoBarWidth = parseInt(logoBar.css("width"));
            if (logoBarWidth * 0.85 > 800) {
                $(".container").css("width", logoBarWidth * 0.85 + "px");
            }
            logoBar.css("padding-left", container.css("margin-left"));
        })
    });

    $("#attentionwebmodal").modal("toggle");

    // 打开
    function toggle_team_number() {
        $("#mymodal").modal("toggle");
    }

    function send_team_number() {
        var teamnumber = $("#team-number").val();
        $.ajax({
            type:"get",
            url:requestRootUrl + "api/update-register/validate-team-id",
            contentType:"application/x-www-form-urlencoded",
            data:{
                teamId:teamnumber
            },
            success:function (data) {
                if(!data.exists) {
                    $("#attentionmodal").modal("toggle");
                } else {
                    // 非服务端运行时跳转url
                    /*[-*/
                    window.location.href = "update-register.html";
                    /*-]*/

                    // 服务端运行时跳转url
                    /*[+
                    window.location.href = "/update-register/" + teamnumber;
                     +]*/
                }
            }
        })
    }
</script>
</body>
</html>
